<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Cordova下载并预览功能 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.前言近期混合应用开发需要下载和预览的功能，选择方案为先下载到本地，再使用cordova-plugin-file-opener2插件进行预览。 采用此预览方案文件会被先下载到本地，cordova-plugin-file-opener2插件其实可以直接打开网络地址来实现预览，采用此方式是基于以下考虑：  避免重复下载  避免有文件格式解析错误的情况，用户可以到本地再次进行查看  下载目录可控">
<meta name="keywords" content="Cordova">
<meta property="og:type" content="article">
<meta property="og:title" content="Cordova下载并预览功能">
<meta property="og:url" content="https://storm4542.github.io/archives/990bab20.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.前言近期混合应用开发需要下载和预览的功能，选择方案为先下载到本地，再使用cordova-plugin-file-opener2插件进行预览。 采用此预览方案文件会被先下载到本地，cordova-plugin-file-opener2插件其实可以直接打开网络地址来实现预览，采用此方式是基于以下考虑：  避免重复下载  避免有文件格式解析错误的情况，用户可以到本地再次进行查看  下载目录可控">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-03-07T07:10:36.514Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Cordova下载并预览功能">
<meta name="twitter:description" content="1.前言近期混合应用开发需要下载和预览的功能，选择方案为先下载到本地，再使用cordova-plugin-file-opener2插件进行预览。 采用此预览方案文件会被先下载到本地，cordova-plugin-file-opener2插件其实可以直接打开网络地址来实现预览，采用此方式是基于以下考虑：  避免重复下载  避免有文件格式解析错误的情况，用户可以到本地再次进行查看  下载目录可控">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-Cordova下载并预览" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Cordova下载并预览功能
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2019-02-01T03:00:43.000Z" itemprop="datePublished">2019-02-01</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h2><p>近期混合应用开发需要下载和预览的功能，选择方案为先下载到本地，再使用<code>cordova-plugin-file-opener2</code>插件进行预览。</p>
<p>采用此预览方案文件会被先下载到本地，<code>cordova-plugin-file-opener2</code>插件其实可以直接打开网络地址来实现预览，采用此方式是基于以下考虑：</p>
<ol>
<li><p>避免重复下载</p>
</li>
<li><p>避免有文件格式解析错误的情况，用户可以到本地再次进行查看</p>
</li>
<li><p>下载目录可控</p>
</li>
</ol>
<h2 id="2-框架"><a href="#2-框架" class="headerlink" title="2.框架"></a>2.框架</h2><p>项目采用 <code>Cordova + Vue + MintUI</code></p>
<h2 id="3-操作"><a href="#3-操作" class="headerlink" title="3.操作"></a>3.操作</h2><ul>
<li>下载</li>
<li><ul>
<li><code>fileInfo</code>提供下载地址、文件名称、文件格式（或扩展名）</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">downLoad</span>(<span class="params">fileInfo</span>) </span>&#123;</span><br><span class="line">    Vue.$toast(<span class="string">'正在下载，请稍等'</span>);</span><br><span class="line">    <span class="keyword">new</span> FileTransfer().download(</span><br><span class="line">        <span class="built_in">encodeURI</span>(FILES_HOST + <span class="string">"/"</span> + fileInfo.fileid), <span class="comment">//uri网络下载路径</span></span><br><span class="line">        cordova.file.dataDirectory + fileInfo.fileid, <span class="comment">//文件本地存储路径</span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">fileEntry</span>) </span>&#123;</span><br><span class="line">            preView(fileEntry, fileInfo);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">            Vue.$toast(<span class="string">'下载失败'</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(error);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="literal">false</span>,</span><br><span class="line">        &#123;</span><br><span class="line">            headers: &#123;<span class="string">'Authorization'</span>: <span class="string">`Bearer <span class="subst">$&#123;localStorage.getItem(<span class="string">'CFA0'</span>)&#125;</span>`</span>&#125;,</span><br><span class="line">        &#125;</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>下载完成，预览文件</li>
</ul>
<ul>
<li><ul>
<li><p>使用 <code>cordova-plugin-file-opener2</code> 打开文件</p>
</li>
<li><p><code>mineType</code>使用 <code>mime-types</code>获取，提供扩展名即可获取（若后端提供格式则不需要）。</p>
</li>
</ul>
<p>  [地址]: <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/jshttp/mime-types</a>    “Mime-types”</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">preView</span>(<span class="params">fileEntry, fileInfo</span>) </span>&#123;</span><br><span class="line">    Vue.$toast(<span class="string">'开始预览'</span>);</span><br><span class="line">    <span class="keyword">let</span> url;</span><br><span class="line">    <span class="keyword">let</span> platform = device.platform.toLowerCase();</span><br><span class="line">    <span class="keyword">if</span> (platform === <span class="string">'android'</span>) &#123;</span><br><span class="line">        url = fileEntry.toInternalURL() <span class="comment">//安卓预览路径</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        url = fileEntry.toURL() <span class="comment">//ios 预览路径</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'路径'</span>, url);</span><br><span class="line">    cordova.plugins.fileOpener2.showOpenWithDialog(</span><br><span class="line">        url,</span><br><span class="line">        mime.lookup(fileInfo.fileType),</span><br><span class="line">        &#123;</span><br><span class="line">            error: <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">                Vue.$toast(<span class="string">'预览失败'</span>);</span><br><span class="line">            &#125;,</span><br><span class="line">            success: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                Vue.$toast(<span class="string">'预览成功'</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4-可能遇到的坑"><a href="#4-可能遇到的坑" class="headerlink" title="4. 可能遇到的坑"></a>4. 可能遇到的坑</h2><p>在预览文件的时候 <code>cordova-plugin-file-opener2</code>有可能会报以下错误：</p>
<blockquote>
<p>Attempt to invoke virtual method ‘android.content.res.XmlResourceParser android.content.pm.ProviderInfo.loadXmlMetaData(android.content.pm.PackageManager, java.lang.String)’ on a null object reference</p>
</blockquote>
<p>寻找很久，应该是因为权限问题导致，解决办法如下:</p>
<p>在 <code>AndroidManifest.xml</code>中<code>application</code>标签内增加</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">provider</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">android:name</span>=<span class="string">"io.github.pwlin.cordova.plugins.fileopener2.FileProvider"</span> 				  <span class="attr">android:authorities</span>=<span class="string">"$&#123;applicationId&#125;.opener.provider"</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">android:exported</span>=<span class="string">"false"</span> <span class="attr">android:grantUriPermissions</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta-data</span> </span></span><br><span class="line"><span class="tag">           <span class="attr">android:name</span>=<span class="string">"android.support.FILE_PROVIDER_PATHS"</span></span></span><br><span class="line"><span class="tag">           <span class="attr">android:resource</span>=<span class="string">"@xml/opener_paths"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">provider</span>&gt;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="81b0b94a.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Cordova+Vue实现点击两次返回退出应用
        
      </div>
    </a>
  
  
    <a href="bd208f70.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JS变量提升</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/990bab20.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
